<script>
import simplebar from "simplebar-vue";
import i18n from "../i18n";
import { layoutComputed } from "@/state/helpers";

export default {
  props: {
    type: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      required: true,
    },
  },
  computed: {
    ...layoutComputed,
  },
  components: { simplebar },
  data() {
    return {
      languages: [
        {
          flag: require("@/assets/images/flags/us.jpg"),
          language: "en",
          title: "English",
        },
        {
          flag: require("@/assets/images/flags/french.jpg"),
          language: "fr",
          title: "French",
        },
        {
          flag: require("@/assets/images/flags/spain.jpg"),
          language: "es",
          title: "spanish",
        },
        {
          flag: require("@/assets/images/flags/chaina.png"),
          language: "zh",
          title: "Chinese",
        },
        {
          flag: require("@/assets/images/flags/arabic.png"),
          language: "ar",
          title: "Arabic",
        },
      ],
      current_language: "en",
      searchinp: '',
    };
  },
  methods: {
    initFullScreen() {
      document.body.classList.toggle("fullscreen-enable");
      if (
        !document.fullscreenElement &&
        /* alternative standard method */ !document.mozFullScreenElement &&
        !document.webkitFullscreenElement
      ) {
        // current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(
            Element.ALLOW_KEYBOARD_INPUT
          );
        }
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    },
    toggleRightSidebar() {
      // this.$parent.toggleRightSidebar();
    },
    toggleMenu() {
      let element = document.getElementById("topnav-menu-content");
      element.classList.toggle("show");
    },
    setLanguage(locale) {
      i18n.locale = locale;
      this.current_language = i18n.locale;
    },
    signout(){
      this.$router.push('/login')
    },
    Search(){
      alert(this.searchinp)
    },
    toReport(){
      this.$router.push('/dashboard/operationReport')
    },
    toCycle(){
      this.$router.push('/dashboard/sourceLifeCycle')
    },
    toDataLifeCycle(){
      this.$router.push('/dashboard/dataLifeCycle')
    },
    touser(){
      this.$router.push('/user')
    },
  },
  mounted() {
    this.value = this.languages.find((x) => x.language === i18n.locale);
    this.text = this.value.title;
    this.flag = this.value.flag;
  },
  watch: {
    type: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          switch (newVal) {
            case "dark":
              document.body.setAttribute("data-topbar", "dark");
              break;
            case "light":
              document.body.setAttribute("data-topbar", "light");
              document.body.removeAttribute("data-layout-size", "boxed");
              break;
            case "colored":
              document.body.setAttribute("data-topbar", "colored");
              document.body.removeAttribute("data-layout-size", "boxed");
              break;
            default:
              document.body.setAttribute("data-topbar", "dark");
              break;
          }
        }
      },
    },
    width: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          switch (newVal) {
            case "boxed":
              document.body.setAttribute("data-layout-size", "boxed");
              break;
            case "fluid":
              document.body.setAttribute("data-layout-mode", "fluid");
              document.body.removeAttribute("data-layout-size");
              break;
            default:
              document.body.setAttribute("data-layout-mode", "fluid");
              break;
          }
        }
      },
    },
  },
};
</script>

<template>
  <header id="page-topbar">
    <div class="navbar-header">
      <div class="d-flex">
        <!-- LOGO -->
        <div class="navbar-brand-box" style="width:auto;">
          <a href="/" class="logo logo-dark">
            <span class="logo-sm">
              <img src="@/assets/images/logo.png" alt height="22" />
            </span>
            <span class="logo-lg">
              <img src="@/assets/images/logo.png" alt height="20" />
            </span>
          </a>

          <a href="/" class="logo logo-light">
            <span class="logo-sm">
              <img src="@/assets/images/logo.png" alt height="30" />
            </span>
            <span class="logo-lg newlogo-lg">
              <img src="@/assets/images/logo.png" alt height="30" />
              <div>思通数科·开源情报引擎</div>
            </span>
          </a>
        </div>

        <button
          type="button"
          class="btn btn-sm px-3 font-size-24 d-lg-none header-item"
          data-toggle="collapse"
          @click="toggleMenu"
        >
          <i class="ri-menu-2-line align-middle"></i>
        </button>

        <!-- 搜索框-->
        <div class="app-search d-none d-lg-block">
          <div class="position-relative">
            <input
              type="text"
              class="form-control"
              @keyup.enter="Search"
              v-model="searchinp"
              placeholder="请输入关键词"
            />
            <!-- :placeholder="$t('navbar.search.text')" -->
            <span class="ri-search-line"></span>
          </div>
        </div>
        <!-- 搜索框右侧下拉框 -->
        <b-dropdown
          variant="black"
          class="d-inline-block user-dropdown"
          toggle-class="header-item"
        >
          <template v-slot:button-content>
            <!-- {{ $t("navbar.dropdown.megamenu.text") }} -->
            搜索范围
            <i class="mdi mdi-chevron-down"></i>
          </template>
          <b-dropdown-item>资讯检索</b-dropdown-item>
          <b-dropdown-item>招标检索</b-dropdown-item>
          <b-dropdown-item>工商检索</b-dropdown-item>
          <b-dropdown-item>政策检索</b-dropdown-item>
          <b-dropdown-item>机器检索</b-dropdown-item>
        </b-dropdown>
      </div>

      <div class="d-flex">
        <div class="dropdown d-lg-inline-block">
          <button
            type="button"
            class="btn header-item noti-icon waves-effect"
            data-toggle="fullscreen"
          >
            <div class="newstyle">
              <span>99+</span>
              告警
            </div>
          </button>
        </div>
        <!-- 全屏 -->
        <!-- <div class="dropdown d-none d-lg-inline-block ml-1">
          <button
            type="button"
            class="btn header-item noti-icon waves-effect"
            data-toggle="fullscreen"
            @click="initFullScreen"
          >
            <i class="ri-fullscreen-line"></i>
          </button>
        </div> -->

        <b-dropdown
          right
          menu-class="dropdown-menu-lg p-0"
          toggle-class="header-item noti-icon"
          variant="black"
        >
          <template v-slot:button-content>
            <i class="ri-notification-3-line"></i>
            <span class="noti-dot"></span>
          </template>
          <div class="p-3">
            <div class="row align-items-center">
              <div class="col">
                <h6 class="m-0">
                  系统消息
                </h6>
              </div>
            </div>
          </div>
          <simplebar style="max-height: 230px">
            <div @click="toReport" class="text-reset pointer notification-item">
              <div class="media">
                <div class="avatar-xs mr-3">
                  <span
                    class="avatar-title bg-primary rounded-circle font-size-16"
                  >
                    <i class="ri-file-paper-2-line"></i>
                  </span>
                </div>
                <div class="media-body">
                  <h6 class="mt-0 mb-1">
                    系统运行报告
                  </h6>
                  <div class="font-size-12 text-muted">
                    <p class="mb-1">
                      将呈现给您完整的系统运行数据分析结果。
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div @click="toCycle" class="text-reset pointer notification-item">
              <div class="media">
                <div class="avatar-xs mr-3">
                  <span
                    class="avatar-title bg-primary rounded-circle font-size-16"
                  >
                    <i class="ri-recycle-fill"></i>
                  </span>
                </div>
                <div class="media-body">
                  <h6 class="mt-0 mb-1">
                    信源生命周期
                  </h6>
                  <div class="font-size-12 text-muted">
                    <p class="mb-1">
                      信源生命周期简介
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div @click="toDataLifeCycle" class="text-reset pointer notification-item">
              <div class="media">
                <div class="avatar-xs mr-3">
                  <span
                    class="avatar-title bg-success rounded-circle font-size-16"
                  >
                    <i class="ri-checkbox-circle-line"></i>
                  </span>
                </div>
                <div class="media-body">
                  <h6 class="mt-0 mb-1">
                    数据生命周期
                  </h6>
                  <div class="font-size-12 text-muted">
                    <p class="mb-1">
                      数据生命周期简介
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <a href class="text-reset notification-item">
              <div class="media">
                <img
                  src="@/assets/images/users/avatar-4.jpg"
                  class="mr-3 rounded-circle avatar-xs"
                  alt="user-pic"
                />
                <div class="media-body">
                  <h6 class="mt-0 mb-1">
                    {{ $t("navbar.dropdown.notification.salena.title") }}
                  </h6>
                  <div class="font-size-12 text-muted">
                    <p class="mb-1">
                      {{ $t("navbar.dropdown.notification.salena.text") }}
                    </p>
                    <p class="mb-0">
                      <i class="mdi mdi-clock-outline"></i>
                      {{ $t("navbar.dropdown.notification.salena.time") }}
                    </p>
                  </div>
                </div>
              </div>
            </a>
          </simplebar>
          <div class="p-2 border-top">
            <a
              class="btn btn-sm btn-link font-size-14 btn-block text-center"
              href="javascript:void(0)"
            >
              <i class="mdi mdi-arrow-right-circle mr-1"></i>
              {{ $t("navbar.dropdown.notification.button") }}
            </a>
          </div>
        </b-dropdown>
        <!-- 头像 -->
        <b-dropdown
          right
          variant="black"
          toggle-class="header-item"
          class="d-inline-block user-dropdown"
        >
          <template v-slot:button-content>
            <img
              class="rounded-circle header-profile-user"
              src="@/assets/images/users/headportrait.jpg"
              alt="Header Avatar"
            />
            <span class="d-none d-xl-inline-block ml-1">
              <!-- {{$t("navbar.dropdown.kevin.text")}} -->
              管理员
            </span>
            <i class="mdi mdi-chevron-down d-none d-xl-inline-block"></i>
          </template>
          <!-- item-->
          <b-dropdown-item>
            <i class="ri-lock-password-line align-middle mr-1"></i>
            修改密码
          </b-dropdown-item>
          <b-dropdown-item @click="touser">
            <i class="ri-user-line align-middle mr-1"></i>
            用户管理
          </b-dropdown-item>
          <b-dropdown-item>
            <i class="ri-fingerprint-line align-middle mr-1"></i>
            锁定屏幕
          </b-dropdown-item>
        </b-dropdown>
        <!-- 设置 -->
        <div class="dropdown d-inline-block">
          <button
            type="button"
            class="btn header-item noti-icon right-bar-toggle waves-effect toggle-right"
            @click="toggleRightSidebar"
          >
            <i class="ri-settings-2-line toggle-right"></i>
          </button>
        </div>
        <!-- 退出 -->
        <div class="dropdown d-inline-block">
          <button
            type="button"
            class="btn header-item noti-icon right-bar-toggle waves-effect toggle-right"
            @click="signout"
          >
            <i class="ri-logout-circle-r-line toggle-right"></i>
          </button>
        </div>
      </div>
    </div>
  </header>
</template>
<style lang="scss" scoped>
.newlogo-lg{
  display: flex;
  align-items: center;
  div{
    font-size: 16px;
    color: #ffffff;
  }
}
.newstyle{
  span{
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
    color: #fff;
    background-color: #ff3d60;
    font-family: Inter,sans-serif;
  }
}
</style>
